package com.shenzhenai.composebasic.components

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandIn
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.shenzhenai.composebasic.R

/**
 * @author huangzehui
 * @date 2025/9/17 13:47 周三
 * @description
 *
 *
 * 动画1
 * https://www.bilibili.com/video/BV1ju411B7ce?vd_source=e07cc8cc94eb22bd76722071b03cd199&spm_id_from=333.788.player.switch
 */
@Composable
fun AnimationSample() {
    var visible by remember {
        mutableStateOf(false)
    }

    Column {
        Button(onClick = {
            visible = !visible
        }) {
            Text("点击")
        }

        // 可见/不可见动画
        AnimatedVisibility(
            visible = visible,
//            enter = scaleIn() + expandIn()
            enter = slideInVertically { -40 } + expandIn()
        ) {
            Image(painter = painterResource(R.drawable.qier), contentDescription = null)
        }
    }
}

@Composable
fun AnimationSample1() {
    var visible by remember {
        mutableStateOf(false)
    }

    Column {
        Button(onClick = {
            visible = !visible
        }) {
            Text("点击")
        }

        AnimatedVisibility(
            visible = visible,
            // 设置进入动画为无，就是不需要进入动画
            enter = EnterTransition.None
        ) {
            Box(
                modifier = Modifier
                    .size(300.dp)
                    .background(Color.Red)
            ) {
                Box(
                    modifier = Modifier
                        .size(150.dp)
                        .align(Alignment.Center)
                        // 这个动画必须放在background前面，否则不会执行
                        .animateEnterExit(
                            enter = slideInVertically(animationSpec = tween(durationMillis = 1000)),
                            exit = slideOutVertically()
                        )
                        .background(Color.Green)


                ) {

                }
            }
        }
    }


}

/**
 * 动画2
 * https://www.bilibili.com/video/BV1Bu411B7rs?vd_source=e07cc8cc94eb22bd76722071b03cd199&spm_id_from=333.788.videopod.sections
 */
@Composable
fun AnimationSample2() {
    var count by remember {
        mutableStateOf(0)
    }

    Row {
        Button(onClick = {
            count++
        }) {
            Text(text = "Add")
        }

        // 内容变化动画（状态变化的时候触发动画）
        AnimatedContent(targetState = count) { targetState ->
            Text(text = "Count:${targetState}")
        }
    }
}

/**
 * 动画2
 * https://www.bilibili.com/video/BV1Bu411B7rs?vd_source=e07cc8cc94eb22bd76722071b03cd199&spm_id_from=333.788.videopod.sections
 */
@Composable
fun AnimationSample3() {
    var count by remember {
        mutableStateOf(0)
    }

    Row {
        Button(onClick = {
            count++
        }) {
            Text(text = "+")
        }

        Button(onClick = {
            count--
        }) {
            Text(text = "-")
        }

        // 内容变化动画（状态变化的时候触发动画）
        AnimatedContent(
            targetState = count,
            // 自定义动画
            transitionSpec = {
                // 这个动画的效果类似淘宝的文字轮播翻转动画
                val result = if (targetState > initialState) {
                    slideInVertically { fullHeight -> fullHeight } + fadeIn() togetherWith slideOutVertically { fullHeight -> -fullHeight } + fadeOut()
                } else {
                    slideInVertically { fullHeight -> -fullHeight } + fadeIn() togetherWith slideOutVertically { fullHeight -> fullHeight } + fadeOut()
                }

                // 加多这个，上一个item消失，衔接着下一个item的出现
                result.using(
                    // 这里设置不裁剪，可以看到两个 item 之间的过度
                    SizeTransform(clip = false)
                )

                result

            }) { targetState ->
            Text(text = "Count:${targetState}")
        }
    }
}


/**
 * 动画2
 * https://www.bilibili.com/video/BV1Bu411B7rs?vd_source=e07cc8cc94eb22bd76722071b03cd199&spm_id_from=333.788.videopod.sections
 */
@Composable
fun AnimationSample4() {
    var message by remember {
        mutableStateOf("Hello")
    }

    Column {
        Button(onClick = {
            message += " China "
        }) {
            Text("Button")
        }

        Text(
            text = message, modifier = Modifier
                // 内容长度发生变化的时候触发动画
                .animateContentSize()
        )
    }
}

/**
 * 动画3
 * https://www.bilibili.com/video/BV1Vi4y1C7MM?vd_source=e07cc8cc94eb22bd76722071b03cd199&spm_id_from=333.788.videopod.sections
 */
@Composable
fun AnimationSample5() {

    var size by remember {
        mutableStateOf(30.dp)
    }

    // dp 值动画
    val sizeAnimation by animateDpAsState(
        targetValue = size,
        // 设置插值器，让动画有弹性
        animationSpec = spring(Spring.DampingRatioHighBouncy)
    )

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = null,
            tint = Color.Red,
            modifier = Modifier
                // 设置大小，用动画的值
                .size(sizeAnimation)
                .clickable {
                    size += 30.dp
                })
    }
}

@Preview
@Composable
fun AnimationSamplePreview() {
//    AnimationSample()
//    AnimationSample1()
//    AnimationSample2()
//    AnimationSample3()
//    AnimationSample4()
    AnimationSample5()
}